<template>
  <d2-container>
    <div class="insure_page">
      <div class="title-sub flex">
        <div>
          <d2-icon-svg style="fill: #556677;" name="more-line"/>
          <span class="sub_title_name">投保单号</span>
          <span class="sub_title_num">(保存后生成)</span>
        </div>
      </div>
      <nav-page>
        <nav-page-item title="基本" icon="el-icon-plus" :status="status.basic">
          <base-info ref="basic" @validate="handleValidate('basic', ...arguments)"/>
        </nav-page-item>
        <nav-page-item title="车辆" :status="status.car">
          <car-info ref="car" @validate="handleValidate('car', ...arguments)"/>
        </nav-page-item>
        <nav-page-item title="客户" :status="status.customer">
          <customer-info ref="customer" @validate="handleValidate('customer', ...arguments)"/>
        </nav-page-item>
        <nav-page-item title="合同" :status="status.agreement">
          <agreement-info ref="agreement" @validate="handleValidate('agreement', ...arguments)"/>
        </nav-page-item>
      </nav-page>
    </div>
    <template slot="footer">
      <div class="submit-btns text-center">
        <el-button @click="handleSubmit" type="primary" size="mini">提交</el-button>
        <el-button type="primary" size="mini">暂存</el-button>
      </div>
    </template>
  </d2-container>
</template>

<script>
import util from '@/libs/util'
import BaseInfo from './components/basic-info'
import CarInfo from './components/car-info'
import CustomerInfo from './components/customer-info'
import AgreementInfo from './components/agreement-info'

export default {
  components: {
    AgreementInfo,
    BaseInfo,
    CarInfo,
    CustomerInfo
  },
  data () {
    return {
      status: {
        basic: 'success',
        car: 'success',
        customer: 'success',
        agreement: 'success',
      },
      forms: [
        {
          key: 'baseInfo',
          title: '基本'
        }
      ]
    }
  },
  methods: {
    async handleSubmit () {
      const forms = [
        this.$refs.basic.$refs.d2Crud,
        this.$refs.car,
        this.$refs.customer,
        this.$refs.agreement,
      ]
      let error = false
      for (const form of forms) {
        let valid = await form.doValidate()
        if (!valid) {
          error = true
        }
      }
      if (error) {
        return
      }

      const data = {
        ...this.$refs.basic.getEditForm(),
        ...this.$refs.car.getEditForm(),
        ...this.$refs.customer.getEditForm(),
        ...this.$refs.agreement.getEditForm()
      }
      console.log(data)

      this.$message.success('提交成功')
    },
    handleValidate (form, success) {
      if (success) {
        this.status[form] = 'success'
      } else {
        this.status[form] = 'error'
      }
    },
    handleNavClick (item) {
      let $el = this.$refs[item.key].$el
      util.scrollByEl($el)
    }
  }
}
</script>

<style scoped lang="scss">

</style>

<style lang="scss">

</style>
